<template>
	<view class="viewimg">
		<!-- 利用vue3异步等待组件引入图表Suspense -->
			<Suspense>
			<view class="a"  >
				<echarts class="echarts" :option="option" style="height: 300px;padding:16px;"></echarts>
			</view>
			</Suspense>
	</view>
</template>

<script async = "async">
import { defineAsyncComponent } from 'vue';
const echarts = defineAsyncComponent(() => import('@/components/echarts/echarts.vue'));

// import echarts from '@/components/echarts/echarts.vue';

import request from '@/service/request1.js';
export default {
	data() {
		return {
			option: {},
			datax:[],
			datay:[]
		};
	},
	onLoad() {
		this.$router.go()
	},
	components: {
        echarts
		// : () => import('@/components/echarts/echarts.vue')
	},
	/* created(){
	    let that=this;
	    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
	        that
	    });
	  }, */
	mounted() {
		this.logstatrt();
	},
	methods: {
		logstatrt() {
			// console.log('初次调用');
			request(
				'/api/workbench/deskmode?modetype=huikuan',
				{
					dateRang: ['2021-09-01', '2021-09-30'],
					selectType: ''
				},
				'POST'
			).then(res => {
				// console.log(res.data.result.data.barData);
				// let datax = []
				// let datay = []
				res.data.result.data.barData.forEach(e => {
					this.datax.push(e.label);   //  x轴数据赋值
					this.datay.push(e.回款金额)  // y轴数据赋值
					console.log(this.datax)
				});
				console.log(this.option);
				
			});
			console.log(this.datay)
			if(this.datay != []){
				this.option = {
					xAxis: {
						type: 'category',
						data: this.datax
					},
					yAxis: {
						type: 'value'
					},
					legend: {
					        data: ['回款金额']
					    },
					series: [
						{
							name:'回款金额',
							data: this.datay,
							type: 'line',
							smooth: true
						},
						{
							name:'',
							data: [],
							type: 'line',
							smooth: true
						},
						{
							name:'',
							data: [],
							type: 'line',
							smooth: true
						},
					]
				};
			}
			      
			}
		}
	}
</script>
<style scoped lang="scss">
.viewimg {
	height: 100%;
		background-color: $uni-text-color-inverse;
	.echarts :deep(div){
		margin:20rpx;
	}
}

</style>
